<template>
	<view>
		<view style="padding: 24rpx 24rpx 0 24rpx;">
			<view class="start_layout">
				<view class="shadow-area">截止当月累计到位资金：<span class="color-num" style="color:#3389FF">{{number1}}</span> 万元
				</view>
			</view>
			<view class="end_layout margin-tb">
				<view class="shadow-area">当月完成投资占年度投资计划：<span class="color-num" style="color:#FD8A19">{{number2}}</span>
					%
				</view>
			</view>
			<view class="start_layout">
				<view class="shadow-area">截至当月累计完成投资占年度投资计划： <span class="color-num"
						style="color:#3389FF">{{number3}}</span> %
				</view>
			</view>
			<view class="end_layout margin-tb">
				<view class="shadow-area">截至当月累计完成投资：<span class="color-num" style="color:#3389FF">{{number4}}</span>
					万元，其中，设备投资：
					<span class="color-num" style="color:#FD8A19">{{number5}}</span> 万元，土地投资：<span class="color-num"
						style="color:#FD8A19">{{number6}}</span> 万元，建安投资：<span class="color-num"
						style="color:#FD8A19">{{number7}}</span> 万元
				</view>
			</view>
			<view v-if="!isEdit" class="end_layout">
				<view>
					<u-button @click="pullPreviousContent" type="primary" text="拉取前次进展内容" size="small"></u-button>
				</view>
				<view style="margin-left: 20rpx;">
					<u-button @click="reset(1)" type="error" text="重置" size="small"></u-button>
				</view>
			</view>
		</view>
		<view v-if="isEdit">
			<view v-if="form.state==0" class="state-area bg-green light">
				<view class="sub-state text-green">审核状态：审核通过</view>
			</view>
			<view v-if="form.state==2" class="state-area bg-red light">
				<view class="sub-state text-red">审核状态：审核驳回</view>
				<view style="margin-top: 20rpx;" class="sub-state text-red">
					驳回原因：{{form.auditOpinion}}</view>
			</view>
			<view v-if="form.state==1" class="state-area bg-orange light">
				<view class="sub-state text-orange">达效审核状态：待审核</view>
			</view>
			<view class="info-box">
				<view class="info-title">项目投资情况</view>
				<view class="info-item">
					<view class="info-label">进度上报日期：</view>
					<view>{{form.progressReportDate}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">当月到位资金：</view>
					<view> {{ form.currentMonthFunds ? form.currentMonthFunds + '万元' : "-" }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">当月完成投资：</view>
					<view>{{ form.currentMonthInvestment ? form.currentMonthInvestment + '万元' : "-" }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">当月设备投资：</view>
					<view> {{ form.equipmentInvestment ? form.equipmentInvestment + '万元' : "-" }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">当月土地投资：</view>
					<view> {{ form.landInvestment ? form.landInvestment + '万元' : "-" }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">当月建安投资：</view>
					<view>{{ form.constructionInvestment ? form.constructionInvestment + '万元' : "-" }}</view>
				</view>
			</view>
			<view class="info-box">
				<view class="info-title">建设进度</view>
				<view v-if="form.constructionProgress" style="width: 100%;padding: 20rpx 0;">
					<u-line-progress height="10" :percentage="form.constructionProgress"
						activeColor="#ff0000"></u-line-progress>
				</view>
				<view v-else class="info-item">-</view>
			</view>
			<view class="info-box">
				<view class="info-title">目前进展情况</view>
				<view class="info-item">{{ form.currentProgressStatus ? form.currentProgressStatus : '-' }}</view>
			</view>
			<view class="info-box">
				<view class="info-title">项目形象进度图片</view>
				<view v-if="form.progressImageUrl" class="info-item">
					<u-image style="margin-right: 20rpx;" v-for="(item1,index1) in form.progressImageUrl.split(',')"
						:key="index1" :showLoading="true" :src="item1" :radius="5" width="100px" height="100px"
						@click="clickPic(form.progressImageUrl.split(','),index1)"></u-image>
				</view>
				<view v-else>-</view>
			</view>
			<view class="info-box">
				<view class="info-title">项目形象进度视频</view>
				<video v-if="form.progressVideoUrl" webkit-playsinline="true" x5-video-player-type="h5"
					x5-video-orientation="portraint" style="width: 100%;height:500rpx;object-fit: cover;"
					@play="playVedio()" @fullscreenchange="screenchange" id="myVideo"
					:poster="form.progressVideoCoverUrl" :src="form.progressVideoUrl" controls></video>
				<view v-else>-</view>
			</view>
			<view v-if="form.attachmentUrl" class="info-box">
				<view class="info-title">附件</view>
				<view v-for="(item1,index1) in form.attachmentUrl.split(',')" :key="index1">
					<a class="table-title" @click="showDetail(item1)">附件{{ index1+1 }}</a>
				</view>
			</view>
		</view>
		<view v-if="!isEdit" class="form-area">
			<u--form labelPosition="top" labelWidth="200" :model="form" :rules="rules" ref="uForm">
				<view style="margin: 20rpx 0;" class="info-title">项目投资情况</view>
				<u-form-item required label="进度上报日期:" prop="progressReportDate">
					<view style="width: 100%;" @click="openDate">
						<u--input disabled disabledColor="#ffffff" style="pointer-events: none;" placeholder="请选择进度上报日期"
							v-model="form.progressReportDate" suffixIcon="calendar"
							suffixIconStyle="color: #909399"></u--input>
					</view>
				</u-form-item>
				<u-form-item required label="当月到位资金:" prop="currentMonthFunds">
					<u--input type="digit" placeholder="请输入当月到位资金" maxlength="10" v-model="form.currentMonthFunds">
						<template slot="suffix">万元</template>
					</u--input>
				</u-form-item>
				<u-form-item required label="当月完成投资:" prop="currentMonthInvestment">
					<u--input type="digit" placeholder="请输入当月完成投资" maxlength="10" v-model="form.currentMonthInvestment">
						<template slot="suffix">万元</template>
					</u--input>
				</u-form-item>
				<u-form-item required label="当月设备投资:" prop="equipmentInvestment">
					<u--input type="digit" placeholder="请输入当月设备投资" maxlength="10" v-model="form.equipmentInvestment">
						<template slot="suffix">万元</template>
					</u--input>
				</u-form-item>
				<u-form-item required label="当月土地投资:" prop="landInvestment">
					<u--input type="digit" placeholder="请输入当月土地投资" maxlength="10" v-model="form.landInvestment">
						<template slot="suffix">万元</template>
					</u--input>
				</u-form-item>
				<u-form-item required label="当月建安投资:" prop="constructionInvestment">
					<u--input type="digit" placeholder="请输入当月建安投资" maxlength="10" v-model="form.constructionInvestment">
						<template slot="suffix">万元</template>
					</u--input>
				</u-form-item>
				<view style="margin: 20rpx 0;" class="info-title">项目进度情况</view>
				<u-form-item required label="建设进度:" prop="constructionProgress">
					<u--input type="digit" placeholder="请输入建设进度" maxlength="5" v-model="form.constructionProgress">
						<template slot="suffix">%</template>
					</u--input>
				</u-form-item>
				<u-form-item required label="目前进展情况:" prop="currentProgressStatus">
					<u--textarea :height="150" v-model="form.currentProgressStatus" maxlength="200" count
						placeholder="请输入目前进展情况"></u--textarea>
				</u-form-item>
				<u-form-item required label="进度图片:" prop="progressImage">
					<filePicker :fileExtname="['bmp','jpg','png','jpeg']" v-model="form.progressImageArr"
						@select="selectFile($event,'progressImage')" @delete="deleteFile($event,'progressImage')"
						limit="5" file-mediatype="image">
					</filePicker>
				</u-form-item>
				<u-form-item required label="进度视频封面:" prop="progressVideoCover">
					<filePicker :fileExtname="['bmp','jpg','png','jpeg']" v-model="form.progressVideoCoverArr"
						@select="selectFile($event,'progressVideoCover')"
						@delete="deleteFile($event,'progressVideoCover')" limit="1" file-mediatype="image">
					</filePicker>
				</u-form-item>
				<u-form-item required label="进度视频:" prop="progressVideo">
					<filePicker :fileExtname="['mp4','wmv','mkv']" v-model="form.progressVideoArr"
						@select="selectFile($event,'progressVideo')" @delete="deleteFile($event,'progressVideo')"
						limit="4" file-mediatype="all">
					</filePicker>
				</u-form-item>
				<u-form-item label="附件:" prop="attachment">
					<filePicker :fileExtname='["pdf", "png", "jpg", "zip", "rar", "doc", "docx", "xls", "xlsx"]'
						v-model="form.attachmentArr" @select="selectFile($event,'attachment')"
						@delete="deleteFile($event,'attachment')" limit="4" file-mediatype="all">
					</filePicker>
				</u-form-item>
			</u--form>
			<pickDate ref="myPicker" @submit="handleSubmit" :start-year="1930" :end-year="2099"
				:time-hide="[true, true, false, false, false, false]" :time-label="['年', '月']">
			</pickDate>
			<view style="padding: 40rpx 0;">
				<u-button shape='circle' class="sub-btn" type="primary" @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updateProjectProgress,
		addProjectProgress,
		getProjectProgress,
		initProgress
	} from '@/utils/api.js'
	import pickDate from '@/components/yt-dateTimePicker/yt-dateTimePicker.vue'
	import filePicker from '@/components/uni-file-picker/uni-file-picker.vue'
	import {
		openFile
	} from '@/utils/index.js'
	export default {
		components: {
			filePicker,
			pickDate
		},
		data() {
			return {
				isEdit: false,
				popData: {},
				form: {},
				rules: {
					progressReportDate: [{
						required: true,
						message: "进度上报日期不能为空",
						trigger: "blur"
					}],
					currentMonthFunds: [{
						required: true,
						message: "当月到位资金不能为空",
						trigger: "blur"
					}],
					currentMonthInvestment: [{
						required: true,
						message: "当月完成投资不能为空",
						trigger: "blur"
					}],
					equipmentInvestment: [{
						required: true,
						message: "设备投资不能为空",
						trigger: "blur"
					}],
					landInvestment: [{
						required: true,
						message: "土地投资不能为空",
						trigger: "blur"
					}],
					constructionInvestment: [{
						required: true,
						message: "建安投资不能为空",
						trigger: "blur"
					}],
					currentProgressStatus: [{
						required: true,
						message: "目前进展情况不能为空",
						trigger: "change"
					}],
					constructionProgress: [{
						required: true,
						message: "建设进度不能为空",
						trigger: "blur"
					}],
				},
				projectId: null
			}
		},
		async onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.name
			});
			if (option.name == '项目进度详情') {
				this.isEdit = true
			} else {
				this.isEdit = false
			}
			this.projectId = option.id
			await this.reset()
			if (option.subId) {
				getProjectProgress(option.subId).then(res => {
					if (res.data) {
						this.form = res.data
						this.form.constructionProgress = this.form.constructionProgress.toString()
						this.form.progressImageArr = []
						if (this.form.progressImageUrl) {
							this.form.progressImageUrl.split(",").forEach((item, index) => {
								this.form.progressImageArr.push({
									name: '进度图片' + (index + 1),
									url: item,
									ossId: this.form.progressImage.split(",")[index]
								})
							})
						}
						this.form.progressVideoArr = []
						if (this.form.progressVideoUrl) {
							this.form.progressVideoUrl.split(",").forEach((item, index) => {
								this.form.progressVideoArr.push({
									name: '进度视频' + (index + 1),
									url: item,
									ossId: this.form.progressVideo.split(",")[index]
								})
							})
						}
						this.form.progressVideoCoverArr = []
						if (this.form.progressVideoCoverUrl) {
							this.form.progressVideoCoverUrl.split(",").forEach((item, index) => {
								this.form.progressVideoCoverArr.push({
									name: '视频封面' + (index + 1),
									url: item,
									ossId: this.form.progressVideoCover.split(",")[index]
								})
							})
						}
						this.form.attachmentArr = []
						if (this.form.attachmentUrl) {
							this.form.attachmentUrl.split(",").forEach((item, index) => {
								this.form.attachmentArr.push({
									name: '附件' + (index + 1),
									url: item,
									ossId: this.form.attachment.split(",")[index]
								})
							})
						}
					}
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		computed: {
			number1() {
				return (
					parseFloat(this.popData.currentMonthFunds) +
					(this.form.currentMonthFunds ?
						parseFloat(this.form.currentMonthFunds) :
						0)
				);
			},
			number2() {
				if (this.popData.currentYearPlannedInvestment == 0) {
					return 0;
				} else {
					return (
						(this.form.currentMonthInvestment ?
							parseFloat(this.form.currentMonthInvestment) :
							0) / parseFloat(this.popData.currentYearPlannedInvestment)
					).toFixed(2);
				}
			},
			number3() {
				if (this.popData.currentYearPlannedInvestment == 0) {
					return 0;
				} else {
					return (
						((this.form.currentMonthInvestment ? parseFloat(this.form.currentMonthInvestment) : 0) +
							(this.form.currentMonthInvestment ?
								parseFloat(this.form.currentMonthInvestment) :
								0)) /
						parseFloat(this.popData.currentYearPlannedInvestment)
					).toFixed(2);
				}
			},
			number4() {
				return (
					parseFloat(this.popData.currentMonthInvestment) +
					(this.form.currentMonthInvestment ?
						parseFloat(this.form.currentMonthInvestment) :
						0)
				);
			},
			number5() {
				return (
					parseFloat(this.popData.equipmentInvestment) +
					(this.form.equipmentInvestment ?
						parseFloat(this.form.equipmentInvestment) :
						0)
				);
			},
			number6() {
				return (
					parseFloat(this.popData.landInvestment) +
					(this.form.landInvestment ? parseFloat(this.form.landInvestment) : 0)
				);
			},
			number7() {
				return (
					parseFloat(this.popData.constructionInvestment) +
					(this.form.constructionInvestment ?
						parseFloat(this.form.constructionInvestment) :
						0)
				);
			}
		},
		methods: {
			//打开选择时间
			openDate() {
				this.$refs.myPicker.show();
			},
			//选择时间
			handleSubmit(e) {
				this.form.progressReportDate = `${e.year}-${e.month}`
			},
			reset(index) {
				this.form = {
					baseId: undefined,
					projectId: this.projectId,
					progressReportDate: undefined,
					currentMonthFunds: undefined,
					currentMonthInvestment: undefined,
					equipmentInvestment: undefined,
					landInvestment: undefined,
					constructionInvestment: undefined,
					progressImage: undefined,
					progressVideoCover: undefined,
					progressVideo: undefined,
					currentProgressStatus: undefined,
					constructionProgress: undefined,
					attachment: undefined,
					progressImageArr: [],
					progressVideoCoverArr: [],
					progressVideoArr: [],
					attachmentArr: []
				}
				if (index == 1) {
					this.$nextTick(() => {
						this.$refs.uForm.clearValidate()
					})
				}
				initProgress(this.projectId).then(res => {
					if (res.data) {
						this.popData = res.data
					}
				})
			},
			//拉取前次
			pullPreviousContent() {
				if (this.popData.projectProgress) {
					this.form = this.popData.projectProgress
				} else {
					uni.showToast({
						title: '前次进度无数据！',
						icon: 'none',
						duration: 2000
					})
				}
			},
			//选择上传
			selectFile(e, name) {
				uni.uploadFile({
					url: getApp().globalData.fileUrl, //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						"Authorization": uni.getStorageSync('access_token'),
						"clientid": "e5cd7e4891bf95d1d19206ce24a7b32e"
					},
					success: (uploadFileRes) => {
						this.form[name + 'Arr'].push({
							name: JSON.parse(uploadFileRes.data).data.fileName,
							url: JSON.parse(uploadFileRes.data).data.url,
							ossId: JSON.parse(uploadFileRes.data).data.ossId
						})
						this.form[name] = this.form[name + 'Arr'].map((
							elem,
							index) => {
							return elem.ossId;
						}).join(",")
					},
					fail: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					}
				});
			},
			//删除上传
			deleteFile(e, name) {
				this.form[name + 'Arr'].splice(this.form[name + 'Arr'].findIndex(
					item => item
					.url == e.tempFilePath), 1);
				this.form[name] = this.form[name + 'Arr'].map((elem,
					index) => {
					return elem.ossId;
				}).join(",")
			},
			//打开文件
			showDetail(url) {
				if (url) {
					openFile(url)
				}
			},
			clickPic(item, index) {
				uni.previewImage({
					current: index,
					urls: item
				});
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (!this.form.progressImage) {
						uni.showToast({
							title: '进度图片不能为空',
							icon: 'none',
							duration: 2000
						})
					} else if (!this.form.progressVideoCover) {
						uni.showToast({
							title: '进度视频封面不能为空',
							icon: 'none',
							duration: 2000
						})
					} else if (!this.form.progressVideo) {
						uni.showToast({
							title: '进度视频不能为空',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showLoading({
							title: '提交中'
						});
						if (this.form.baseId) {
							updateProjectProgress(this.form).then(res => {
								if (res.code == 200) {
									uni.hideLoading()
									uni.showToast({
										title: '提交成功！',
										icon: 'success',
										duration: 2000
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else {
							addProjectProgress(this.form).then(res => {
								if (res.code == 200) {
									uni.hideLoading()
									uni.showToast({
										title: '提交成功！',
										icon: 'success',
										duration: 2000
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						}
					}
				}).catch(errors => {
					console.log('errors: ', errors);
					uni.$u.toast('请完善必填项！')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-area {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 10rpx 30rpx 30rpx 30rpx;
	}

	.shadow-area {
		background: linear-gradient(180deg, rgba(239, 246, 254, 0.8) 0%, rgba(251, 252, 255, 0.8) 46%, rgba(255, 255, 255, 0.8) 100%);
		box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(51, 137, 255, 0.1);
		border-radius: 16rpx;
		border: 2rpx solid #FFFFFF;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		padding: 20rpx 30rpx;

		.color-num {
			font-size: 28rpx;
			margin: 0 10rpx;
		}
	}

	.info-box {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 10rpx 30rpx;
	}

	.info-item {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
		margin: 15rpx 0;

		.info-label {
			color: #999999;
			flex-shrink: 0;
		}
	}

	.state-area {
		padding: 30rpx;
	}
</style>